<template id="my">
  <section class="my-section">
    <header>
      <div class="jd-header-new-bar" id="jd_header_new_bar">
        <div
          report-eventid="MCommonHead_Back"
          report-eventparam="https://wq.jd.com/mcoss/wxmall/home"
          id="m_common_header_goback"
          class="jd-header-icon-back J_ping"
        >
          <span @click="goback()"></span>
        </div>
        <div class="jd-header-new-title">京东登录注册</div>
        <div
          report-eventid="MCommonHead_NavigateButton"
          report-eventparam="https://wq.jd.com/mcoss/wxmall/home"
          id="m_common_header_jdkey"
          class="jd-header-icon-new-shortcut J_ping"
        >
        </div>
      </div>
    </header>
    <main class="my-main">
      <div class="main-bigwrap">
        <div class="main-form">
          <form action="">
            <div class="phone">
              <label for="">
                <p>+86</p>
                <span></span>
              </label>
              <input type="tel" placeholder="请输入手机号">
            </div>
            <div class="yanzm">
              <input type="tel" placeholder="请输入收到的验证码">
              <button>获取验证码</button>
            </div>
            <div class="dl">
              <button class="dl01">登录</button>
              <button class="dl02">一键登录</button>
            </div>
            <div class="haunfs">
              <p>账号密码登录</p>
              <p>手机快速注册</p>
            </div>
          </form>
          <div class="qtdlfs">
            <p>其他登录方式</p>
          </div>
          <div class="QQWX">
            <div class="QQ">
              <img src="../../../data/assets/images/QQ.png" alt="">
              <p>QQ</p>
            </div>
            <div class="WX">
              <img src="../../../data/assets/images/WX.png" alt="">
              <p>微信</p>
            </div>
          </div>
          <div class="yszc">
            <p>未注册的手机号验证后将自动创建京东账号, 登录即代表您已同意<a href="">京东隐私政策</a></p>
          </div>
        </div>
      </div>
    </main>
  </section>
</template>
<script>
export default {
  data() {
    return {
      show01: false
    };
  },
  methods: {
    change01() {
      this.show01 = !this.show01;
    },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>

<style>
.ooo .mint-swipe-items-wrap {
  padding-bottom: 29%;
}
</style>
<style scoped>
* {
  list-style: none;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
#m_common_header {
  position: relative;
  z-index: 10;
}
.jd-header,
.jd-header a {
  font-family: PingHei, Lucida Grande, Lucida Sans Unicode, STHeiti, Helvetica,
    Arial, Verdana, "sans-serif";
  font-size: 16px;
  text-decoration: none;
  color: #252525;
}
.jd-header {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 44px;
  text-decoration: none;
  color: #252525;
}
.jd-header-new-bar {
  position: relative;
  border-bottom: none !important;
  min-height: 44px;
  background: #fff;
}
.jd-header-icon-back,
.jd-header-icon-logo {
  position: absolute;
  width: 40px;
  height: 44px;
}
.jd-header-icon-back span {
  display: inline-block;
  margin: 12px 0 0 10px;
  width: 20px;
  height: 20px;
  background: url(../../assets/images/header-left.png) no-repeat 50%;
  background-position: 0 0;
  background-size: contain;
}
.jd-header-new-title {
  margin: 0 70px;
  height: 44px;
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-main .main-bigwrap{
  margin: 0 20px;
}
.main-form .phone{
  height: 50px;
  position: relative;
  margin-top: 20px;
  border-bottom: 0.5px solid #efefef;
}
.main-form .phone label{
  width: 70px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.main-form .phone input{
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 1rem;
  padding-left: 80px;
  border: none;
  
}
.main-form .phone label{
  overflow: hidden;
  display: flex;
  margin-left: 10px;
}
.main-form .phone label p{
  line-height: 50px;
}
.main-form .phone label span{
    display: block;
    width: 14px;
    height: 6px;
    overflow: hidden;
    background: url(../../../data/assets/images/xiangxiajt.png) no-repeat;
    background-size: 100% auto;
    margin-left: 10px;
    margin-top: 23px;
}
.main-form .yanzm{
  margin-top: 20px;
  padding: 10px 0px;
  border-bottom: 0.5px solid #efefef;
  
}
.main-form .yanzm input{
  line-height: 30px;
  width: calc(100% - 115px);
  font-size: 1rem;
  border: none;
  padding-left: 10px;
  outline: none;
}
.main-form .yanzm button{
  width: 110px;
  line-height: 30px;
  font-size: 0.8rem;
  background: #fff;
  border: none;
  border-left: 1px solid #ccc;
  outline: none;
  color: #848689;
}
.main-form .dl{
  padding: 0 10px;
  margin-top: 20px;
}
.main-form .dl01{
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-size: 0.9rem;
  background: red;
  opacity: 0.4;
  border: none;
  border-radius: 30px;
}
.main-form .dl02{
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #f10000;
  font-size: 0.9rem;
  margin-top: 10px;
  background: #fff;
  border: 1px solid #ff2000;
  border-radius: 30px;
}
.haunfs{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0px 10px;
}
.haunfs p{
  color: rgba(0,0,0,.4);
  font-size: 0.9rem;
}
.qtdlfs{
  border-top: 1px solid rgba(0,0,0,.1);
  margin-top: 80px;
}
.qtdlfs p{
  width: 140px;
  text-align: center;
  color: rgba(0,0,0,.2);
  font-size: 0.8rem;
  margin: 0 auto;
  margin-top: -8px;
  background: #fff;
}
.QQWX{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.QQWX .QQ{
  margin-right: 40px;
}
.QQWX img{
  width: 45px;
  height: 45px;
}
.QQWX p{
  text-align: center;
  color: rgba(0,0,0,.4);
  font-size: 0.8rem;
}
.main-form .yszc{
  padding: 0 10px;
  margin-top: 20px;
}
.main-form .yszc p{
  text-align: center;
  color: rgba(0,0,0,.4);
  font-size: 0.8rem;
  line-height: 20px;
}
.main-form .yszc p a{
  color: #4a90e2;
  text-decoration: none;
}
</style>